<template>
    <view>

        <!-- <u-sticky> -->
        <!-- 只能有一个根元素 -->
        <!-- <view class="sticky"> -->
        <!--                   <view class="status_bar">
                          </view> -->
        <u-navbar :is-back="false">
            <view class="sticky">
                <view class="header">
                    <view :style="{backgroudColor: bgColor,height: ztheight + 'px',width: width}"></view>
                    <image src="/static/logo3.png" class="logo"></image>
                    <view class="search">
                        <u-search placeholder="请输入关键词" v-model="keyword" :show-action="false" @search="searchByWord()">
                        </u-search>
                    </view>
                    <view class="bell">
                        <u-icon name="reload" color="#ff0000" size="50" class="rightbell"  @click="reloadpage()"></u-icon>
                        <u-icon name="bell" color="#ff0000" size="50"  @click="showPopup()"></u-icon>
                        
                    </view>
                    

                </view>
                <view class="u-tabs-box">
                    <u-tabs-swiper activeColor="#ff0000" ref="tabs" :list="list" :current="current" @change="change"
                        :is-scroll="true"></u-tabs-swiper>
                </view>
            </view>
        </u-navbar>
        <!-- </view> -->
        <!-- </u-sticky> -->
        <view class="wrap">
            <swiper class="swiper-box content-box" :current="swiperCurrent" @transition="transition"
                @animationfinish="animationfinish">
                <swiper-item class="swiper-item">
                    <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
                        <!-- <button @click="toPath()">点击</button> -->
                        <!-- <navigator :url="/pages/articles/index"></navigator> -->
                        <!-- <navigator :url="'/pages/articles/index'">sdsd</navigator> -->
                        <home @tab="getHome"></home>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="swiper-item">
                    <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
                        <event v-bind:eventtype="1"></event>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="swiper-item">
                    <scroll-view scroll-y style="height: 100%;width: 100%;">
                        <site></site>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="swiper-item">
                    <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
                        <personage></personage>
                    </scroll-view>
                </swiper-item>
                <swiper-item class="swiper-item">
                    <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
                        <travel></travel>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
        <u-popup v-model="show" mode="center" width="700rpx" height="600px" border-radius="40" :closeable="true">
            <view class="message">
                <view class="m-title">
                    消息列表
                </view>
                <u-line color="black" />
                <view class="m-main">
                    <scroll-view scroll-y="true" style="min-height: 300rpx;">
                        <view class="m-box">
                            欢迎您来到世纪浙江APP
                        </view>
                        <view v-for="item in forumList" :key="item.id">
                            <view class="m-box" @click="goMain(item.id,item.forumTitle)">

                                您的帖子"{{item.forumTitle}}"有新的回复请查收
                            </view>
                        </view>
                    </scroll-view>

                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import home from "../../components/home/index.vue"
    import event from "../../components/event/index.vue"
    import personage from "../../components/personage/index.vue"
    import site from "../../components/site/index.vue"
    import travel from "../../components/travel/index.vue"
    import {
        getEvents,
        selectMyForums
    } from "../../api/data.js"
    export default {
        components: {
            home,
            event,
            personage,
            site,
            travel,
        },
        data() {
            return {
                orderList: [
                    [],
                    [],
                    [],
                    []
                ],
                list: [{
                        name: '首页'
                    },
                    {
                        name: '百年历程'
                    },
                    {
                        name: '红色基地'
                    },
                    {
                        name: '伟人烈士'
                    },
                    {
                        name: '游记新闻'
                    },
                ],
                current: 0,
                swiperCurrent: 0,
                tabsHeight: 0,
                dx: 0,
                loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
                keyword: '',
                ztheight: 0,
                bgColor: '#ffffff',
                width: '100%',
                eventList: [],
                eventtpye: 0,
                show: false,
                userInfo: {},
                forumList: [],
                token: ''
            };
        },
        computed: {},
        onLoad() {
            this.ztheight = uni.getSystemInfoSync().statusBarHeight
            console.log(this.ztheight)
        },
        onShow() {
            this.token = uni.getStorageSync('token')
            this.userInfo = uni.getStorageSync('userInfo')
            // this.getEventList()
            // this.getHome(0)
        },
        methods: {
            getEventList() {
                const _this = this
                getEvents().then(function(res) {
                    for (let i = 0; i < 3; i++) {
                        _this.eventList.push(res.data.data[i])
                    }
                    console.log(_this.eventList)
                })
            },
            reachBottom() {
                // 此tab为空数据
                if (this.current != 2) {
                    this.loadStatus.splice(this.current, 1, "loading")
                    setTimeout(() => {}, 1200);
                }
            },
            // tab栏切换
            change(index) {
                this.swiperCurrent = index;
            },
            transition({
                detail: {
                    dx
                }
            }) {
                // console.log("dx", dx)
                this.$refs.tabs.setDx(dx);
            },
            animationfinish({
                detail: {
                    current
                }
            }) {
                // console.log("current",current)
                this.$refs.tabs.setFinishCurrent(current);
                this.swiperCurrent = current;
                this.current = current;
            },
            toPath() {
                // console.log("sd")
                uni.navigateTo({
                    url: 'test?id=1&name=uniapp'
                });
            },
            searchByWord() {
                uni.navigateTo({
                    url: '/pages/index/search/index?searchword=' + this.keyword
                });
            },
            getHome(tab) {
                // console.log(tab)
                // this.$refs.tabs.setDx(tab);
                // this.$refs.tabs.setFinishCurrent(tab);
                this.swiperCurrent = tab;
                // this.current = tab;

                // this.animationfinish({
                //     detail: {
                //         tab
                //     }
                // })




            },
            showPopup() {
                if (this.token == '') {
                    uni.showModal({
                        title: '提示',
                        content: '您还未登录，请登录后再操作',
                        cancelText: '稍后再试',
                        success: function(res) {
                            if (res.confirm) {
                                uni.navigateTo({
                                    //1为添加，2为回复
                                    url: '/pages/login/index'
                                })
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });

                } else {
                    this.show = true
                    this.getForums()
                }

            },
            getForums() {
                const _this = this
                // console.log("hellp")
                selectMyForums({
                    userId: this.userInfo.id
                }).then(function(res) {
                    // console.log(res.data.data)
                    // _this.forumList = res.data.data
                    for (let i = 0; i < res.data.data.length; i++) {
                        if (res.data.data[i].commentNumber > 1) {
                            _this.forumList.push(res.data.data[i])
                        }
                    }
                    // console.log(_this.forumList)
                })
            },
            goMain(id, title) {
                uni.navigateTo({
                    url: '/pages/forum/main/index?id=' + id + '&title=' + title
                })
            },
            reloadpage(){
                uni.reLaunch({
                    url: '/pages/index/index'
                });
            }
        }
    };
</script>


<style lang="scss" scoped>
    // .header{
    //     // height: 82rpx;
    //     background-color: white;
    //     padding-top: 100rpx;
    //     // margin-top: 40rpx;
    // }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
        margin-top: 44px;
    }

    .swiper-box {
        flex: 1;
    }

    .swiper-item {
        height: 100%;
    }

    .sticky {
        width: 750rpx;
        color: #fff;
    }

    .logo {

        width: 70rpx;
        height: 82rpx;
        // display: inline-block;
        // vertical-align: middle;
        // margin-left: 30rpx;

    }

    .word {
        display: inline-block;
        vertical-align: middle;
        margin-left: 30rpx;
    }

    .bell {
        float: right;
        // vertical-align: middle;
        // margin-top: 15rpx;
        // margin-right: 50rpx;
    }

    .content-box {
        // height: 1700rpx;
        background: #dddddd;
    }

    .header {
        padding: 0 20rpx;
        // padding-bottom: var(--window-bottom);

        background-color: white;
        // padding: 20rpx;

        .logo,
        .search {
            display: inline-block;
            vertical-align: middle;

        }

        .bell {
            float: right;
            vertical-align: middle;
            margin-top: 30rpx;
        }
    }

    .search {
        padding: 30rpx 0 10rpx 50rpx;
        width: 70%;
        // text-align: center;
    }

    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
        background-color: white;
    }

    .message {
        padding: 30rpx;
        color: #464646;

        // background-color: #f6f6f6;
        .m-title {
            font-size: 40rpx;
            margin-bottom: 20rpx;
            text-align: center;
        }

        .m-main {
            margin-top: 20rpx;

            .m-box {
                padding: 20rpx 30rpx;
                // margin-top: 30rpx;
                margin: 10rpx 0rpx;
                background: #fff;
                border: 3rpx solid #ddd;
                border-radius: 20rpx;
                // color: #F1F1F1;
            }

        }
    }
    .rightbell{
        margin-right: 10rpx;
    }
</style>
